import React, { Component } from 'react';
import classNames from 'classnames';

class TabNav extends Component {

  getTabNav () {
    // console.log(this.props);
    const {classPrefix, activeIndex, panels} = this.props;
    return panels && panels.map(panel => {
      let order = panel.props.order;
      let classes = classNames({
        [`${classPrefix}-tab`]: true,
        [`${classPrefix}-active`]: activeIndex === order
      });
      return (
        <li onClick={this.fnClick.bind(this, order)} key={order} className={classes}>{panel.props.tab}</li>
      )
    })
  }
  fnClick (activeIndex) {
    // console.log(activeIndex, this.props.activeIndex);
    // this.props.handleChange({
    //   activeIndex,
    //   prevIndex: this.props.activeIndex
    // });
    this.props.handleChange(activeIndex);
  }
  render() {
    return (
      <div className={`${this.props.classPrefix}-nav`}>
        {
          this.getTabNav()
        }
      </div>
    );
  }
}

export default TabNav;
